package com.example.learnjetpackcompose.layout1

import androidx.activity.ComponentActivity
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.semantics.Role.Companion.Image
import androidx.compose.ui.tooling.preview.Preview

/**
 *Author: chinadragon
 * https://developer.android.google.cn/jetpack/compose/layouts/basics?hl=zh-cn
 */
class BaseLayoutActivity : ComponentActivity() {
}

/*
    标准布局组件
在许多情况下，您只需使用 Compose 的标准布局元素即可。

使用 Column 可将多个项垂直地放置在屏幕上。


 */
@Composable
fun ArtistCardColumn() {
    Column {
        Text(text = "Alfred Sisley")
        Text(text = "3 minutes ago")
    }
}

data class Artist(val image: ImageBitmap, val name: String, val lastSeenOnline: String)

/*
同样，使用 Row 可将多个项水平地放置在屏幕上。Column 和 Row 都支持配置它们所含元素的对齐方式。
 */
@Preview
@Composable
fun ArtistCardRow(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}